<template>
    <view class="title">
		购买记录
    </view>
	<view @click="back" class="back">
		<image src="../../static/back.png" mode="widthFix"></image>
	</view>
	<view class="content">
		<view class="box" v-for="(item, index) in list" >
			<view class="top">
				<view class="left">
					<image :src="item.image" mode="widthFix"></image>
				</view>
				<view class="right">
					<view class="name">
						{{ item.name }}
					</view>
					<view class="specification">
						{{ item.specification.capacity }}
						{{ item.specification.temperature }}
						{{ item.specification.material }}
					</view>
					<view class="recipient">
						<uni-icons type="contact" size="22"></uni-icons>收货人 {{ item.recipient }}
					</view>
				</view>
			</view>
			<view class="down">
				<view class="down_top">
					<view class="address">
						<uni-icons type="location-filled" size="20"></uni-icons>{{ item.address }}
					</view>
				</view>
				<view class="down_down">
					<view>
						实付款￥
						<text class="t1">{{ item.value.toFixed(2).substring(0, 3) }}</text>
						<text class="t2">{{ item.value.toFixed(2).substring(3, 5) }}</text>
					</view>
				</view>
			</view>
<!-- 			<view>
				{{ timestampToDate(item.time) }}
			</view> -->
		</view>
	</view>
	
</template>

<script setup>
import { ref } from 'vue'
const id = uni.getStorageSync('userId')
const db = uniCloud.database()
let data = []
const list = ref(uni.getStorageSync('waitingForReceiverList'))
console.log(list.value);

db.collection('purchase')
	.where(`userId == '${id}'`)
	.get()
	.then(async res  =>  {
		console.log(res.result.data);
		data = res.result.data
		for (let i = 0; i < data.length; ++i) {
			const res = await db.collection('goods').doc(data[i].goodsId).get()
			const d = await res.result.data[0]
			data[i].name = d.name
			data[i].image = d.image
		}
		
	}).catch(err => {
		console.log(err.message);
	}).finally(res => {
		console.log(data);
		list.value = data
		uni.setStorageSync('waitingForReceiverList', data)
		console.log(JSON.stringify(list.value));
	})
	
	
function timestampToDate(timestamp) {
	var date = new Date(timestamp);  // 参数需要毫秒数，所以这里将秒数乘于 1000
	const Y = date.getFullYear() + '-';
	const M = date.getMonth() + 1 + '-'
	const D = date.getDate() + ' ';
	const h = String(date.getHours()).padStart(2, '0') + ':';
	const m = String(date.getMinutes()).padStart(2, '0') + ':';
	const s = String(date.getSeconds()).padStart(2, '0');
	return Y+M+D+h+m+s
}

function back() {
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 56rpx;
		font-weight: 550;
		margin-left: 260rpx;
		margin-bottom: 70rpx;
		padding-top: 70rpx;
	}
	.back {
		background-color: white;
		height: 93rpx;
		width: 93rpx;
		position: fixed;
		z-index: 2;
		border-radius: 70rpx;
		left: 50rpx;
		top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 50rpx;
		}
	}
	.content {
		.box {
			display: flex;
			flex-direction: column;
			background-color: #F3F4F4;
			padding: 50rpx 20rpx;
			border-radius: 70rpx;
			margin: 40rpx;
			.top {
				display: flex;
				// justify-content: space-around;
				.left{
					image {
						width: 250rpx;
						height: 250rpx;
						margin-left: 10rpx;
					}
				}
				.right {
					margin-left: 30rpx;
					.name {
						font-size: 36rpx;
						font-weight: 600;
					}
					.specification {
						font-size: 36rpx;
						// font-weight: 600;
						color: gray;
					}
					
					.recipient {
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
			.down {
				margin-top: 30rpx;
				margin-left: 10rpx;
				.address {
					display: flex;
					// justify-content: center;
					align-items: center;
				}
				.down_down {
					display: flex;
					justify-content: flex-end;
					margin-right: 20rpx;
					font-size: 32rpx;
					.t1 {
						font-size: 42rpx;
						font-weight: 600;
					}
					.t2 {
						font-weight: 600;
					}
				}
			}
		}
	}
</style>
